<script lang="ts" setup>
import type {
  AvatarActive,
  AvatarAppearance,
  AvatarColor,
  AvatarShape,
  AvatarSize,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    active?: AvatarActive;
    appearance?: AvatarAppearance;
    color?: AvatarColor;
    colorId?: string;
    initials?: string;
    name?: string;
    shape?: AvatarShape;
    size?: AvatarSize;
  }>(),
  {
    active: undefined,
    appearance: undefined,
    color: undefined,
    colorId: undefined,
    initials: undefined,
    name: undefined,
    shape: undefined,
    size: undefined,
  },
);
defineSlots<{
  badge: [];
  default: [];
}>();
</script>

<template>
  <fluent-avatar
    :active="active"
    :appearance="appearance"
    :color="color"
    :color-id="colorId"
    :initials="initials"
    :name="name"
    :shape="shape"
    :size="size"
  >
    <slot></slot>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="badge">
      <slot name="badge"></slot>
    </span>
  </fluent-avatar>
</template>
